<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="image/🐋.jpg" alt="">
        <!-- 标题 -->
        <span class="title">我的博客系统</span>
        <!-- 空白的占位符 -->
        <span class="spacer"></span>
        <!-- 右侧的几个链接 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>

    </div>

    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <div class="card">
                <img src="image/头像.jpg" alt="">

                <h3></h3>
                <a href="">gitee 地址</a>

                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!--右侧内容详情  -->
        <div class="right">
             <!-- 每个 .blog 就表示一篇博客的区域 -->
<!--             <div class="blog">-->
<!--                 &lt;!&ndash; 博客的标题 &ndash;&gt;-->
<!--                 <div class="title"></div>-->
<!--                 &lt;!&ndash; 博客的发布时间 &ndash;&gt;-->
<!--                 <div class="date"></div>-->
<!--                 &lt;!&ndash; 博客的摘要 &ndash;&gt;-->
<!--                 <div class="desc">-->

<!--                 </div>-->
<!--                 &lt;!&ndash; 查看博客详情按钮 &ndash;&gt;-->
<!--                 <a href="" class="detail">查看全文 &gt; &gt;</a>-->
<!--             </div>-->
        </div>

    </div>
     <!-- 基于 ajax 的方式来从服务器获取数据 -->
    <script src="JS/jquery.min.js"></script>
    <script>
        // 1. 通过 ajax 来给服务器发送获取博客列表的请求
        $.ajax({
            url: 'blog',  // 此处是相对路径, 不能写/ , 写了/ 就变成绝对路径了
            method: 'GET',
            success: function(data,status){
                // data 就表示响应的 body, status 就表示响应的状态码描述
                // 根据获取到的 body 的内容, 来构造 HTML 片段
                // 此处 data 不是 String 而是一个 json 数组
                // 当响应为 403 的时候, 是不能被 success 这个回调函数处理的
                buildBlogs(data);
            },
            error: function(data, status){
                // 在此处可以进行一个页面的重定向跳转
                // 在前端进行重定向
                location.assign('login.html');
            }
        });

        // 2. 根据响应中的 body 数据,构造HTML 内容 
         function buildBlogs(blogs) {
            // 遍历这个 blogs, 然后根据每个遍历的结果, 构造出一个 HTML 片段, 并加入到页面中.
            let rightDiv = document.querySelector('.container .right');
            for (let blog of blogs) {
                // 此处的 blog 就是一个 json 对象, 里面的内容就和服务器响应的 json 是匹配的.
                // 创建出 div.blog
                let blogDiv = document.createElement('div');
                blogDiv.className = 'blog';
                // 创建出 div.title
                let titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = blog.title;
                blogDiv.appendChild(titleDiv);
                // 创建出 div.date
                let dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                // 此处 postTime 是一个毫秒时间戳, 而实际需要的是一个格式化日期
                dateDiv.innerHTML = formatDate(blog.postTime);
                blogDiv.appendChild(dateDiv);
                // 创建出 div.desc
                let descDiv = document.createElement('div');
                descDiv.className = 'desc';
                descDiv.innerHTML = blog.content;
                blogDiv.appendChild(descDiv);
                // 创建 a.detail
                let detailA = document.createElement('a');
                detailA.className = 'detail';
                detailA.innerHTML = '查看全文 &gt; &gt;';
                detailA.href = 'blog_detail.html?blogId=' + blog.blogId;
                blogDiv.appendChild(detailA);
                // 把 blogDiv 加到 父元素里面
                rightDiv.appendChild(blogDiv);
            }
        }
        function formatDate(timeStampMS){
            var date = new Date(timeStampMS);

            var year = date.getFullYear(),
                month = date.getMonth() + 1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
            (month < 10? '0' + month : month) + '-' +
            (day < 10? '0' + day : day) + ' ' +
            (hour < 10? '0' + hour : hour) + ':' +
            (min < 10? '0' + min : min) + ':' +
            (sec < 10? '0' + sec : sec);
            return newTime;
        }


        // 再来一个 ajax 请求, 去向服务器获取到当前用户的登录状态
        $.ajax({
            url: 'user',
            method: 'GET',
            success: function(data,status) {
                changeUser(data);
            }
        });

        function changeUser(user) {
            // 根据服务器返回的用户信息, 来修改当前的显示内容
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
        }
    </script>
</body>
</html>